<template>
    <div class="SearchBar">
        <div class="center-container">
            <h1>Github 用户搜索</h1>
            <label for="searchBar"><b>输入你想找的Github用户名: </b></label>
            <input id="searchBar" type="text" v-model="userid" @keyup.enter="searchUsers">
            <button @click="searchUsers">搜索</button>
        </div>
    </div>
</template>

<script>
import 'axios'
import axios from 'axios'
export default {
    data () {
        return {
            userid: ''
        }
    },
    methods: {
        // 点击搜索按钮时执行
        searchUsers() {
            // infoObj: {users: [],isFirst: true,isLoding: false,errMessage: ''}
            this.$bus.$emit('updateInfo', {users: [],isFirst: false,isLoding: true,errMessage: ''})
            axios.get(`https://api.github.com/search/users?q=${this.userid}`).then(
                response => {
                    // 更新信息
                    let new_users = response.data.items
                    if (new_users.length == 0) {
                        this.$nextTick(function() {
                            alert('没有这位用户哟！')
                        })
                    }
                    this.$bus.$emit('updateInfo', {users: new_users,isLoding: false,errMessage: ''})
                },
                error => {
                    this.$bus.$emit('updateInfo', {users: [],isLoding: false,errMessage: error.message})
                }
            )
        }
    }

}
</script>

<style scoped>
button {
    cursor: pointer;
    padding: 3px;
    border-radius: 10%;
    background-color: #bb3a29e0;
    border: none;
    color: white;
    font-weight: bold;
}

button:hover {
    background-color: #bc0000;
}

button:active {
    background-color: #bb3a29e0;
}

.SearchBar {
    padding: 10px;
    margin: 40px;
    background-color: #dddddd;
    border-radius: 5px;
}
.center-container {
    text-align: center;
}
button {
    margin-left: 1%;
}
</style>